<template>
  <div class="app-container">
    <avue-crud
      :data="data"
      :option="option"
      v-model="addObj"
      :page="page"
      @search-change="searchChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-save="submit"
      @row-update="edit"
      :before-close="beforeClose"
    >

      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          size="mini"
          icon="el-icon-lock"
          @click.native="resetPassword(scope)"
        >查看详细记录</el-button>
      </template>

    </avue-crud>
  </div>
</template>

<script>
    export default {
        name: "roleManagement",
        watch:{
            data() {
                // 对 Table 进行重新布局
                this.$nextTick(()=>{
                    this.$refs.crud.$refs.table.doLayout()
                })
            },
        },
        data() {
            return {
                addObj: {
                    attachs: [
                        {
                            fileName: "萨达",
                            time: "奥术大师"
                        }
                    ]
                },
                data: [{1:"黄山",2:"水流量传感器",3:"12345678",4:"12345678",5:"2020-11-11 11:11:11",6:"在线"}],
                originPage:{
                    pageSize: 10,
                    currentPage: 1,
                    total: 10,
                },
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10,
                    layout: "total,pager,prev, next",
                },

                option: {
                    labelPosition:"left",
                    dialogEscape: false,
                    dialogClickModal: false,
                    dialogWidth: 1400,
                    height: "auto",
                    calcHeight: 0,
                    searchShow: true,
                    // excelBtn:true,
                    index: true,
                    indexLabel: "序号",
                    searchMenuSpan:4,
                    indexWidth: 100,
                    menuWidth: 300,
                    refreshBtn: false,
                    searchBtn: true,
                    columnBtn: false,
                    addBtn: false,
                    menu: false,
                    delBtn: false,
                    editBtn: false,
                    editBtnText: "修改",
                    align: "center",
                    addTitle: "登记",
                    column: [
                        {
                            label: "采集时间",
                            prop: "5",
                            search:true,
                            searchRange:true,
                            type:"date",
                            searchLabelWidth: 100,
                            format: "yyyy-MM-dd hh:mm:ss",
                            valueFormat: "yyyy-MM-dd hh:mm:ss",
                        },
                        {
                            label: "传感器名称",
                            prop: "1",
                        },
                        {
                            label: "出厂水瞬时流量",
                            prop: "2",
                        },
                        {
                            label: "瞬时流量",
                            prop: "3",
                        },
                        {
                            label: "水位",
                            prop: "4",
                        },
                        {
                            label: "出厂水当日累计流量",
                            prop: "4",
                        },
                        {
                            label: "当日累计流量",
                            prop: "4",
                        },
                        {
                            label: "库容",
                            prop: "4",
                        },
                        {
                            label: "厂内清水池水位",
                            prop: "4",
                        },
                        {
                            label: "云谷寺水库水位",
                            prop: "4",
                        },
                        {
                            label: "西海水库库水位",
                            prop: "4",
                        },
                        {
                            label: "天海清水库水位",
                            prop: "4",
                        },
                        {
                            label: "当月累计流量",
                            prop: "4",
                        },
                        {
                            label: "厂外清水池水位",
                            prop: "4",
                        },
                        {
                            label: "云谷寺下站水位",
                            prop: "4",
                        },
                        {
                            label: "西海清水库水位",
                            prop: "4",
                        },
                        {
                            label: "天海上位水池水位",
                            prop: "4",
                        },
                        {
                            label: "管径",
                            prop: "4",
                        },
                        {
                            label: "实时功率",
                            prop: "4",
                        },
                        {
                            label: "埋深",
                            prop: "4",
                        },
                        {
                            label: "当日累计耗电量",
                            prop: "4",
                        },
                        {
                            label: "安装形式",
                            prop: "4",
                        },
                    ]
                },

            };
        },
        computed: {

        },
        methods: {

            initData() {
                this.page.pageNum=this.page.currentPage
                getList(this.page).then(res=>{
                    this.data = res.data.data.records;
                    this.page.total = res.data.data.total;
                })
            },

            initDic() {
                getPersonList().then(res=>{
                    console.log(res,'人员列表')
                    let index1 = this.findObject(this.option.column, "salesProjectManager");
                    index1.dicData = res.data.data;
                })

            },

            searchChange(params, done) {
                this.page=this.originPage
                this.query=params
                this.page={...this.page,...params}
                console.log(this.page)
                this.initData();
                done()
            },

            sizeChange(val) {
                this.page.currentPage = 1;
                this.page.pageSize = val;
                this.initData();
            },

            currentChange(val) {
                this.page.currentPage = val;
                this.initData();
            },


            handleAdd() {

                this.$refs.crud.rowAdd();

            },


            edit(row, index, done, loading) {
                console.log("editform");
                console.log(row);
                update(row).then(res=>{
                    console.log(res);
                    this.$message.success("编辑信息成功")
                    this.initData();
                })
                done()
            },

            change(data) {
                this.$refs.crud.rowEdit(res.data.data);
            },
            downTemplate(){

            },
            putIn(){

            },
            exportTable(){

            },



            beforeClose(done) {
                done()
            },

        },
        mounted() {
            // this.initData()
            // this.initDic()

        },


        created() {

        },

    };
</script>

<style lang="scss">

</style>
